<template>
    <div class="all-list">
        <el-card class="container mt-4">
            <div slot="header" class="clearfix">
                <span><span class="card-header-box"></span>幼儿园管理</span>
                <a href="javascript:;" class="list-button float-right p-1" @click="logout">登出</a>
                <!--<el-button class="float-right p-1" @click="showDialog">查看结果</el-button>-->
            </div>
            <vue-table :data-source="tableList" :queryString="queryModel">
                <template slot="header">
                    <tr>
                        <th scope="col">幼儿园名称</th>
                        <th scope="col">已报名人数</th>
                        <th scope="col">预计招生</th>
                        <th scope="col">操作</th>
                    </tr>
                </template>
                <template slot="tbody" slot-scope="props">
                    <tr :class=" props.index % 2 == 0 ? 'table-row':''">
                        <td>{{props.item.school_name}}</td>
                        <td :class="props.item.registration_numbers > props.item.upper_limit ? 'colorRed' : ''" @click="toAllList(props.item.school_code)" style="cursor: pointer;">{{props.item.registration_numbers}}</td>
                        <td>{{props.item.upper_limit}}</td>
                        <td>
                            <a href="javascript:;" @click="toResult(props.item.school_code)"><span>录取结果</span></a>
                            <a v-if="props.item.is_import == 0 && props.item.registration_numbers <= props.item.upper_limit" href="javascript:;" @click="enrollAll(props.item.id)"><span>全部录取</span></a>
                            <a href="javascript:;"><span @click="update(props.item.id,props.item.school_name)">编辑</span></a>
                        </td>
                    </tr>
                </template>
            </vue-table>
            <!--<div class="mt-5 mb-2 d-flex justify-content-center">-->
                <!--<el-button type="primary" class="col-3" @click="enrollStudent">录入</el-button>-->
            <!--</div>-->
        </el-card>

        <el-dialog
        :title="title"
        :visible.sync="DialogVisible"
        width="30%"
        center>
        <span>
            <el-form :model="newModel" ref="newModel" :rules="ruleValidate" label-width="85px" style="width: 100%">
                    <el-col :span="18" :offset="3">
                        <el-form-item class="mb-3" label="预计招生: " prop="upperLimit">
                            <el-input v-model="newModel.upperLimit" placeholder="请输入新预计招生数"></el-input>
                        </el-form-item>
                    </el-col>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Dialogsave">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
  import ListDataSource from '../libs/ListDataSource.js'
  import DataApi from '../api/data'
  import Cookie from 'js-cookie';
  export default {
    data(){
      return{
        tableList: new ListDataSource('/api/situation-info'),
        queryModel:{},
        newModel: {
          upperLimit: null
        },
        DialogVisible: false,
        ruleValidate:{
          upperLimit: [
            {required: true, message: '预计招生不能为空', trigger: 'blur'}
          ]
        },
        title:'',
        newId: null,
        refreshList: true,
        isImport: false
      }
    },
    created () {
      let vm = this
      this.isLoading = true
      Promise.all([
        vm.tableList.fetchData()
      ]).then(([Response]) => {
        vm.isLoading = false
      }).catch((error) => {
        vm.isLoading = false
      })
    },
    methods: {
      showDialog(){

      },
      update(id,schoolName) {
        this.DialogVisible = true
        this.title = schoolName
        this.newId = id
      },
      enrollStudent(){
        this.$router.push({
          name: 'entering',
          params: {
            user_id: 0
          }
        })
      },
      toAllList(school){
        this.$router.push({
          path: 'all-list/' + school,
        })
      },
      toResult(school){
        this.$router.push({
          path: 'student-enroll/'+ school
        })
      },
      enrollAll(id){
        let self = this
        this.$confirm('此操作将录取全部学生,一旦确认不可操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DataApi.getEnrollAll(id).then(res => {
            self.$message({
              type: 'success',
              message: '录取全部学生成功!'
            });
            self.refreshList = !self.refreshList
          }).catch(err => {
            self.$message({
              type: 'info',
              message: '录取全部学生失败'
            });
          })
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '取消录取全部学生'
          });
        });
      },
      logout(){
        axios.post('/api/logout', {})
          .then(function (response) {
            Cookie.remove('user');
            window.location.reload();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      Dialogsave(){
        let self = this
        console.log(self.newModel)
        self.$refs['newModel'].validate((valid) => {
          if (valid) {
            console.log('表单验证通过')
            DataApi.postSchoolUpperLimit(self.newId,self.newModel).then((res) => {
              self.$message.success('保存成功')
              self.DialogVisible = false
              self.refreshList = !self.refreshList
            }).catch((err) => {
//              self.$message.error(err.response.data[0])
              console.log(err.response)
            })
          } else {
          }
        })
      }
    },
    compute:{

    },
    watch:{
      'refreshList':function () {
        this.tableList.fetchData()
      }
    }
  }
</script>
